<template>
	<!-- 弹出层 -->
	<div class="modal fade" id="bindPremisesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title" id="myModalLabel">
						楼盘权限
						<font color="red">(该人员需开启相应角色权限后,即可查看其所驻场的楼盘和报备数据)</font>
					</h4>
				</div>
				<div class="modal-body">
					<div class="form-horizontal">
						<div class="form-group">
							<label for="" class="col-sm-4 control-label">账户名称:</label>
							<div class="col-sm-8">
								<input type="text" id="accountName" name="accountName" v-model="bindPremisesInfo.partnerName" class="form-control" disabled>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="col-sm-4 control-label">楼盘名称:</label>
							<div class="col-sm-8">
								<select multiple="multiple" id="premisesSelect" style="width: 260px; height: 34px;">
									<option v-for="(bindRow, index) in allPremises" v-bind:value="bindRow.id" :key="index">{{bindRow.name}}</option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" v-on:click="bindPartnerToPremises" v-show="btnShow" class="btn checkedBtn">确定</button>
				</div>
			</div>
		</div>
	</div>
</template>

<style>
@import url("../../assets/css/multiple-select.css");
</style>

<script>
// import swiper from '../../assets/js/multiple-select.js'
export default {
  //接收父组件的绑定值
  props: ["bindPremisesInfo"],
  data() {
    return {
      //机构信息对象
      bindPremises: {
        partnerId: this.bindPremisesInfo.partnerId,
        premisesIds: "",
      },
      bindedPremises: [
        //已绑定楼盘
      ],

      unBindPremises: [
        //未绑定楼盘
      ],
      allPremises: [],
      btnShow: true,
      selectedPremises: [],
    };
  },
  components: {},
  mounted() {},
  watch: {
    "bindPremisesInfo.partnerId": {
      handler: function(val, oldVal) {
        if (val) {
          this.initBindPremises();
          //this.initUnBindPremises();
        }
      },
      //深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
      deep: true,
    },
  },
  methods: {
    initMultiple() {
      $("#premisesSelect").multipleSelect({
        filter: true,
        selectAllText: "全选",
      });
    },
    bindPartnerToPremises() {
      var _self = this;
      if (!_self.btnShow) {
        layer.msg("请勿重复操作！");
        return;
      }
      //操作类型为新增时，将机构ID设为空,否则会执行修改操作
      var url = _self.utilHelper.apiUrl + "/api/bindPartnerToPremises";
      var premisesIds = $("#premisesSelect").multipleSelect("getSelects");
      console.log(premisesIds);

      _self.bindPremises.premisesIds = premisesIds.toString();
      _self.bindPremises.partnerId = _self.bindPremisesInfo.partnerId;
      var params = _self.bindPremises;
      var body = {};
      body.params = params;
      _self.btnShow = false;
      _self.$http.post(url, body).then(
        (response) => {
          var resData = response.body.resData;
          var result = resData.result;
          var resultMsg = "服务器忙,请刷新页面重试!";
          if ("1" == result) {
            resultMsg = "操作成功!";
          }
          //输出操作信息
          layer.msg(
            resultMsg,
            {
              time: 1000,
            },
            function() {
              //关闭弹出层
              _self.btnShow = true;
              $("#bindPremisesModal").modal("hide");
              //子组件向父组件传递信号: 调用父组件中对子组件的监听
              _self.$emit("bindPremisesListener");
            }
          );
        },
        (response) => {}
      );
    },
    initBindPremises() {
      var _self = this;
      //加载绑定的案场
      var url = _self.utilHelper.apiUrl + "/api/getBindPremises";
      var body = {};
      var params = { partnerId: _self.bindPremisesInfo.partnerId };
      body.params = params;
      _self.$http.post(url, body).then(
        (response) => {
          var resData = response.body.resData;
          _self.selectedPremises = [];
          _self.bindedPremises = [];
          if (resData.inPremisesList && resData.inPremisesList.length > 0) {
            _self.bindedPremises = resData.inPremisesList;
            for (var ii = 0; ii < _self.bindedPremises.length; ii++) {
              var bindedPremises = _self.bindedPremises[ii];
              _self.selectedPremises[ii] = bindedPremises.id;
            }
          }
          //加载未绑定的案场
          //放在此处是由于数据加载延迟问题.
          url = _self.utilHelper.apiUrl + "/api/getPartnerUnBindPremises";
          _self.$http.post(url, body).then(
            (response) => {
              var resData = response.body.resData;
              _self.allPremises = [];
              _self.unBindPremises = [];
              var firstIndex = 0;
              var secondIndex = 0;
              var lastIndex = 0;
              if (_self.bindedPremises && _self.bindedPremises.length > 0) {
                _self.allPremises = _self.bindedPremises;
                firstIndex = _self.allPremises.length;
              }
              if (
                resData.outPremisesList &&
                resData.outPremisesList.length > 0
              ) {
                _self.unBindPremises = resData.outPremisesList;
                secondIndex = _self.unBindPremises.length;
              }
              lastIndex = firstIndex + secondIndex;
              for (var ii = firstIndex; ii < lastIndex; ii++) {
                _self.allPremises[ii] = _self.unBindPremises[ii - firstIndex];
              }
              _self.$nextTick(() => {
                _self.initMultiple();
                $("#premisesSelect").multipleSelect(
                  "setSelects",
                  _self.selectedPremises
                );
              });
            },
            (response) => {}
          );
        },
        (response) => {}
      );
    },
  },
};
</script>